.component-select-sku {
  .popover-sku-box {
    width: 311px;

    .sku-item {
      .sku-name {
        font-size: 12px;
        line-height: 12px;
        color: #999999;
        margin-bottom: 5px;
      }

      .sku-value {
        margin-bottom: 10px;

        .item {
          box-sizing: border-box;
          display: inline-block;
          font-size: 12px;
          color: #333333;
          min-width: 50px;
          height: 22px;
          line-height: 22px;
          padding: 0 8px;
          background: #FFFFFF;
          border: 1px solid #DDDDDD;
          cursor: pointer;
          margin-right: 10px;
          margin-bottom: 5px;
          user-select: none;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .item.active {
          border: 1px solid #E43130;
        }

        .item.not-optional {
          border: 1px dashed #bbb;
          color: #bbb;
        }

        .item.active.not-optional {
          border: 1px dashed #E43130;
        }
      }
    }

    .footer {
      margin-top: 15px;
      display: flex;

      .btn {
        box-sizing: border-box;
        width: 50px;
        height: 22px;
        border-radius: 11px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .btn.red {
        color: #fff;
        background: #E1251B;
        margin-right: 10px;
      }

      .btn.gary {
        color: #999;
        background: #eee;

        &:hover {
          cursor: not-allowed;
        }
      }

      .btn.cancal {
        background: #FFFFFF;
        border: 1px solid #DDDDDD;
      }
    }
  }

}

.prod-sku {
  font-size: 12px;
  color: #999999;
  cursor: pointer;
  display: flex;
  align-items: center;

  .sku-name {
    max-width: 360px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  &:hover {
    cursor: pointer;
  }
}
